<template>
  <div class="comprehensive-form-container">
    <el-page-header @back="goBack()" />
    <el-form
      ref="formRef"
      v-loading="data.loading"
      class="demo-form"
      :disabled="data.disabled"
      label-width="100px"
      :model="data.form"
      :rules="rules"
    >
      <el-form-item label="标题" prop="title">
        <el-input v-model="data.form.title" placeholder="请输入标题" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('formRef')">
          保存
        </el-button>
        <el-button @click="resetForm()">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
  import useForm from '@/hooks/useForm'

  const { formRef, data, resetForm, submitForm, goBack } = useForm({
    res: 'test',
  })

  // 规则验证
  const rules = reactive({
    title: { required: true, message: '标题必须填写' },
  })
</script>
